<template>
  <div class="uploadImg">
    <!-- 上传图片 -->
    <el-dialog
      class="uploadIMG"
      title="上传图片"
      :lock-scroll="true"
      :visible.sync="dialogVisible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :show-close="false"
      center
      width="500px">
      <div class="img__con">
        <!-- 上传图片 -->
        <el-upload
          v-if="dialogVisible"
          :auto-upload="false"
          action
          list-type="picture-card"
          accept="image/png,image/jpg,image/jpeg,image/gif"
          :limit="1"
          :on-preview="preview"
          :on-success="onSuccess"
          :before-upload="beforeUpload"
          :http-request="httpRequest"
          :on-error="uploadError"
          :on-change="imageChange"
          :before-remove="handleRemove"
          :class="fileLists.length > 0 ? 'disable' : ''"
          ref="upload">
          <i class="el-icon-plus" />
        </el-upload>
        <!-- 按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消 上 传</el-button>
          <!-- :disabled="disabl" -->
          <el-button type="primary" @click="uploadInformation">点 击 上 传</el-button>
        </span>
      </div>
    </el-dialog>

    <!-- 图片放大 -->
    <el-dialog :visible.sync="dialogVisibles" class="xianshi">
      <img
        draggable="false"
        style="width: 640px; height: 400px; margin: 20px 0px"
        :src="dialogImageUrl"
        alt=""
      />
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { getDomain } from "@/api/basisMG";
export default {
  name: "UploadImg",
  data() {
    return {
      signData: "",
      uploadData: {
        fileName: "223",
      },
      fileLists: [],
      dialogVisible: false, // 弹框默认隐藏
      dialogVisibles: false, // 放大的图片
      dialogImageUrl: "", // 上传的图片
      OssDomain: "https://c.yjt361.com",
      uploadShow: false, // 是否显示上传图片
      formdata: {
        rcode: "yxeditor",
        uploadfile: "",
        filetype: "P",
        appid: "app202204",
        areacode: "hn",
        expire: 30,
        sign: "",
        timestamp: "",
        filepath: "",
        app: "app",
        isbackup: 1,
        module: 6,
      },
    };
  },
  computed: {
    // baseurl
    baseupload() {
      return "12341";
      // `/appnass/v1/appupload`;
      // `${process.env.VUE_APP_UPLOAD_API}`
    },
    // 提交按钮是否可以点击
    disabl() {
      if (!this.dialogImageUrl) return true;
      return false;
    },
  },
  created() {
    this.getDomain();
  },
  methods: {
    //获取页面标识
    async getDomain() {
      const res = await getDomain("OSS");
      this.OssDomain =
        res.data && res.data.protocal ? res.data.protocal + "://" + res.data.host : "";
    },
    // 上传按钮
    imageChange(file, fileList) {
      this.fileLists = fileList;
      console.log("shan", fileList);
    },
    /* 显示上传文件组件 */
    showUpload() {
      this.dialogVisible = true;
    },
    /* 传递图片地址 */
    uploadInformation() {
      this.$refs.upload.submit();
      // 隐藏上传弹框
      this.dialogVisible = false;
      this.uploadShow = false;
    },
    beforeUpload(file) {
      return true;
    },
    httpRequest(files) {
      const file = files.file;
      const isJPG = files.file.type !== "image/svg";
      const timestamp = new Date().getTime().toString().slice(0, 10);
      const infoData = {
        app: "nrms",
        areacode: "nrms",
        expire: 30,
      };
      if (!isJPG) {
        this.$message.error("请上传正确的图片格式!");
      } else {
        this.signUpload(file.uid, timestamp, infoData).then((res) => {
          this.signData = res.data.data;
          const json = {
            filetype: "P",
            rcode: `${file.uid}`,
            expire: 30,
            appid: "qm202006",
            areacode: "nrms",
            app: "nrms",
            isbackup: 0,
            sign: this.signData,
            timestamp: timestamp,
            uploadfile: files.file,
          };
          this.AUpload(json).then((res) => {
            console.log("上传", res);
            this.dialogImageUrl =
              this.OssDomain + "/appnass/v1/appshow/" + res.data.data.rcode;
            this.fileLists = [];
            this.$emit("uploadInformation", this.dialogImageUrl);
          });
        });
      }
    },
    signUpload(rcode, timestamp, infoData) {
      return axios.post("/gw/tqmsapi/sign/upload", {
        rcode,
        timestamp,
        ...infoData,
      });
    },
    AUpload(json) {
      console.log("json----", json);
      let formData = new FormData();
      for (var key in json) {
        formData.append(key, json[key]);
      }
      return axios({
        method: "post",
        url: "/appnass/v1/appupload",
        data: formData,
        headers: { "Content-Type": "multipart/form-data" },
      });
    },

    // 关闭弹框
    handleClose() {
      this.$confirm("点击取消后您填写的信息将丢失，您确定取消？")
        .then(() => {
          this.fileLists = [];
          this.handleRemove();
          this.$emit("handleClose");
          // 隐藏上传文件
          this.dialogVisible = false;
          this.dialogImageUrl = "";
        })
        .catch(() => {});
    },

    // 删除图片
    handleRemove() {
      this.uploadShow = false;
      this.dialogImageUrl = "";
      return true;
    },

    // 预览
    preview() {
      this.dialogVisibles = true;
    },

    // 上传成功
    onSuccess(response) {
      console.log(response, "888888");
      // 返回错误
    },

    // 上传前
    uploads(file) {
      if (!file.type.includes("image")) {
        this.$message.error("请上传图片！");
        return false;
      }
      this.uploadShow = true;
    },

    // 上传失败
    uploadError() {
      this.$message.error("请重新上传");
      this.uploadShow = false;
    },
  },
};
</script>

<style lang="scss">
@import "../../assets/css/mixin.scss";
.img__con {
  text-align:center;
  .dialog-footer{
    margin-top:30px;
    display:block;
  }
}
</style>
